import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

// 字体大小选项
export type FontSizeOption = 'small' | 'medium' | 'large' | 'extra-large'

// 字体大小比例映射
const fontSizeScales = {
  small: 0.85, // 小号字体 - 85%
  medium: 1, // 中号字体 - 100%（默认）
  large: 1.15, // 大号字体 - 115%
  'extra-large': 1.3, // 特大字体 - 130%
}

// 本地存储键名
const FONT_SIZE_STORAGE_KEY = 'app-font-size'

export const useFontSizeStore = defineStore('fontSize', () => {
  // 从本地存储获取初始字体大小，默认为medium
  const storedFontSize = localStorage.getItem(FONT_SIZE_STORAGE_KEY) as FontSizeOption
  const currentFontSize = ref<FontSizeOption>(storedFontSize || 'medium')

  // 当前字体比例
  const fontSizeScale = ref(fontSizeScales[currentFontSize.value])

  // 设置字体大小
  function setFontSize(size: FontSizeOption) {
    currentFontSize.value = size
    fontSizeScale.value = fontSizeScales[size]
    localStorage.setItem(FONT_SIZE_STORAGE_KEY, size)
    applyFontSize()
  }

  // 应用字体大小到根元素
  function applyFontSize() {
    document.documentElement.style.setProperty('--font-size-scale', fontSizeScale.value.toString())

    // 更新rem基准值（如果使用rem）
    const remBase = 37.5 * fontSizeScale.value
    document.documentElement.style.fontSize = `${remBase}px`
  }

  // 初始化时应用字体大小
  applyFontSize()

  // 监听字体大小变化
  watch(currentFontSize, () => {
    applyFontSize()
  })

  return {
    currentFontSize,
    fontSizeScale,
    setFontSize,
  }
})
